<template>
  <a-modal
    title="$t('noticeCreateForm.fb')"
    :width="720"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="$t('noticeCreateForm.lx')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group v-decorator="['belong', {rules: [{required: true, message: '{{ $t('noticeCreateForm.bnwk') }}'}]}]" @change="handleChangeType" buttonStyle="solid">
            <a-radio-button value="buyer">{{ $t('noticeCreateForm.mj') }}</a-radio-button>
            <a-radio-button value="shop">{{ $t('noticeCreateForm.sj') }}</a-radio-button>
            <a-radio-button value="">{{ $t('noticeCreateForm.qb') }}</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="$t('noticeCreateForm.bt')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-decorator="['title', {rules: [{required: true, message: '$t('noticeCreateForm.bnwk')'}]}]" />
        </a-form-item>
        <a-form-item
          label="$t('noticeCreateForm.ms')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-model="formData.desc" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
export default {
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 17 }
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      loadingParse: false,
      other_action: '',
      formData: {
        title: '',
        desc: '',
        belong: ''
      }
    }
  },
  methods: {
    add () {
      this.visible = true
    },
    handleSubmit () {
      console.log(this.formData)
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          console.log(values)
          this.formData.title = values.title
          this.formData.belong = values.belong
          console.log('values', this.formData)
          setTimeout(() => {
            this.visible = false
            this.confirmLoading = false
            this.$emit('ok', this.formData)
          }, 1500)
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleChangeType (e) {
      this.formData.type = e.target.value
    },
    handleCancel () {
      this.visible = false
    }
  },
  created () {

  }
}
</script>
